<template>
  <div class="parent">
    <px-row v-if="SpcAnalysis.length > 0" :gutter="16">
      <px-col v-for="(item, index) in SpcAnalysis" :key="index" class="numList" :span="8" style="margin-bottom: 16px">
        <unfolodechartDom :activeCharts="activeCharts" :chartvlue="item" :width="'100%'" :height="'270px'" />
      </px-col>
    </px-row>
    <!-- <echartsDom v-if="SpcAnalysis.length > 0" style="float: left; width: 90%" :width="width" :height="height" :option="option" /> -->
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import unfolodechartDom from "./unfolodechartDom.vue";
const props = defineProps({
  SpcAnalysis: {
    type: Object,
    required: true
  },
  activeCharts: {
    type: String,
    default: ""
  }
});
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.numList {
  float: left;
  width: 10%;
  height: 100%;
  margin-top: 20px;

  .numListDiv {
    width: 100%;
    height: 23px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 23px;
    background: #eff6ff;

    .numListDivnum {
      float: left;
      width: calc(50% - 4px);
      height: 20px;
    }

    .txright {
      text-align: right;
    }
  }
}

.heighttwo {
  height: 46px !important;
}

.color2 {
  color: #a6a6a6 !important;
}
</style>
